<template>
    <div>
        <!-- 抽离侧边导航栏 -->
        <el-aside width="240px">
                    <el-col>
                        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#545c64"
                            text-color="#fff" active-text-color="#ffd04b" unique-opened  router>
                            <el-menu-item index="/home">
                                <i class="el-icon-menu"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu :index="item.id.toString()" v-for="item in $store.getters.getUserInfo.menus" :key="item.id" >
                                <template slot="title">
                                    <i :class="item.icon"></i>
                                    <span>{{ item.title }}</span>
                                </template>
                                <el-menu-item-group v-for="menu in item.children" :key="menu.id">
                                    <el-menu-item :index="menu.url">{{menu.title}}</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-aside>
    </div>
</template>
<script>
export default {
    data() {
        return {
            defaultActive:'/home',//默认选中初始值
        }
    },
    methods: {},
    mounted() { 
        // 当页面刷新时  重新给默认选中赋值
        this.defaultActive = this.$route.path;//使用this.$route.path获取地址栏中的地址
        // console.log(this.$store.getters.getUserInfo);
    },
    watch: {},
    computed: {},
    filters: {},
    components: {},
}
</script>
<style lang="less" scoped>
.el-aside {
    height: 600px;

    .el-col {
        height: 100%;

        .el-menu-vertical-demo {
            height: 100%;

        }
    }
}
</style>